<!-- 首页头部组件 -->
<template>
  <view>
    <view class="home-header dflex padding-lr-sm w-full bg-dark" :class="fixed ? 'fixed' : ''">
      <view class="home-search dflex-b border-radius padding-lr w-full" @click.stop="search()">
        <text>{{ searchTip }}</text>
        <view class="iconfont icon-search" />
      </view>
    </view>

    <!-- 头部组件占位符 -->
    <view v-if="fixed && placeholder" class="home-header-placeholder" />
  </view>
</template>

<script setup lang="ts">
  import config from '@/utils/config';
  import { router } from '@/utils/router';

  const props = defineProps({
    fixed: {
      type: [Number, Boolean],
      default: false,
    },
    placeholder: {
      type: [Number, Boolean],
      default: false,
    },
    searchAuto: {
      type: [Number, Boolean],
      default: !0,
    },
    searchTip: {
      type: String,
      default: '搜索关键字',
    },
  });

  const emits = defineEmits(['search']);

  const search = () => {
    // 执行回调函数
    emits('search');
    if (props.searchAuto) {
      // 跳转搜索页
      router.push(config.route.search);
    }
  };
</script>

<style lang="scss">
  .home-header-placeholder {
    height: 100rpx;
  }

  .home-header {
    height: 100rpx;
  }

  .home-search {
    height: 70rpx;
    line-height: 70rpx;
    background-color: #ffffff;

    text {
      color: #c0c0c0;
    }

    .iconfont {
      font-size: $uni-font-size-base + 6rpx;
      color: #c0c0c0;
    }
  }
</style>
